<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="header">
                <h2>{{ "UpdatePassword" | localize }}</h2>
            </div>
            <div class="body table-responsive" #body>
                <form novalidate (ngSubmit)="updatePassword(parentFormGroup.value)">
                    <div [formGroup]="parentFormGroup">
                        <div class="row">
                            <div class="col-md-6">
                                <mat-form-field>
                                    <input matInput id="currentPassword" type="password" name="CurrentPassword" formControlName="currentPassword"
                                        [placeholder]="'Current Password' | localize"
                                        required minlength="2" maxlength="32"
                                        />
                                </mat-form-field>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6" [formGroup]="passwordsFormGroup" formGroupName="passwords">
                                <mat-form-field>
                                    <input matInput id="newPassword" formControlName="newPassword" type="password" name="NewPassword" 
                                        [placeholder]="'New Password' | localize"
                                        required minlength="2" maxlength="32"
                                        />
                                    <mat-error *ngIf="passwordsFormGroup.controls.newPassword.errors">
                                        Passwords must be at least 8 characters, contain a lowercase, uppercase, and number
                                    </mat-error>
                                </mat-form-field>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6" formGroupName="passwords">
                                <mat-form-field>
                                    <input matInput id="repeatNewPassword" formControlName="repeatNewPassword" type="password" name="RepeatNewPassword" 
                                        [placeholder]="'Confirm New Password' | localize" [errorStateMatcher]="equalMatcher"
                                        required minlength="2" maxlength="32"
                                        />
                                    <mat-error *ngIf="passwordsFormGroup.errors &&
                                        passwordsFormGroup.errors.areEqual &&
                                        passwordsFormGroup.controls.newPassword.touched
                                        ">
                                        Passwords do not match
                                    </mat-error>
                                </mat-form-field>
                            </div>
                        </div>
                        <button mat-flat-button type="submit" flex="15" color="primary"
                            [disabled]="!parentFormGroup.valid || isLoading">
                            {{ "Save" | localize }}
                            <i class="fa fa-spin fa-spinner" *ngIf="isLoading"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>